<template>

    <el-col style="padding: 0;">
        <el-menu
        default-active="2"
        class="el-menu-vertical-demo">

        <el-menu-item index="2"  @click="m1">
            <i class="el-icon-s-home" :style="styleIndex===1 ? styleDemo : {}"></i>
            <span slot="title" :style="styleIndex===1 ? styleDemo : {}">项目列表</span>
        </el-menu-item>
        <el-menu-item index="2" @click="m2">
            <i class="el-icon-menu" :style="styleIndex===2 ? styleDemo : {}"></i>
            <span slot="title" :style="styleIndex===2 ? styleDemo : {}">设备列表</span>
        </el-menu-item>
        <el-menu-item index="2" @click="m3">
            <i class="el-icon-s-help" :style="styleIndex===3 ? styleDemo : {}"></i>
            <span slot="title" :style="styleIndex===3 ? styleDemo : {}">升级日志</span>
        </el-menu-item>
        <el-menu-item index="2" @click="m4">
            <i class="el-icon-s-data" :style="styleIndex===4 ? styleDemo : {}"> </i>
            <span slot="title" :style="styleIndex===4 ? styleDemo : {}">升级统计</span>
        </el-menu-item>
        <el-menu-item index="2" @click="m5">
            <i class="el-icon-share" :style="styleIndex===5 ? styleDemo : {}"></i>
            <span slot="title"  :style="styleIndex===5 ? styleDemo : {}">设备转移</span>
        </el-menu-item>

        </el-menu>
    </el-col>

</template>

<script>
  export default {
    name:"navbar",
    methods: {
        m1(){
            this.styleIndex = 1;
            this.$emit('win',1)
        },
        m2(){
            this.styleIndex = 2;
            this.$emit('win',2)
        },
        m3(){
            this.styleIndex = 3;
            this.$emit('win',3)
        },
        m4(){
            this.styleIndex = 4;
            this.$emit('win',4)
        },
        m5(){
            this.styleIndex = 5;
            this.$emit('win',5)
        }
    },
    data(){
        return {
            styleIndex :0,
            styleDemo:{
                 color: "rgb(64, 158, 255) !important",
            },
        };
    }

  }
</script>

<style>
    .el-menu{
        background-color: #304055;
        transition: width .28s;
        width: 15% !important;
        background-color: #304156;
        height: 100%;
        position: fixed;
        font-size: 0;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1001;
        overflow: hidden;

    }
    .el-menu-item>*{
        color: #fff !important;
    }
    .el-menu-item:hover{
        background-color: #263445;
    }
    .el-menu-item:focus{
        background-color: #26344571;
    }
</style>
